<header>
    矢图画笔 SVG
</header>
<h2>
    引入
</h2>
<pre>
import svgRender from './src/tool/svg/index';
</pre>
<h2>
    使用
</h2>
<p>
    传递一个svg结点，返回的是一个画笔对象：
</p>
<pre>
var painter = svgRender(document.getElementsByTagName('svg')[0]);
</pre>
<h3>
    配置画笔
</h3>
<pre>
painter.config({
    // 填充色或图案
    "fillStyle": 'black',

    // 轮廓色或图案
    "strokeStyle": 'black',

    // 线条宽度(单位px，下同)
    "lineWidth": 1,

    // 文字水平对齐方式（"left"左对齐、"center"居中和"right"右对齐）
    "textAlign": 'left',

    // 文字垂直对齐方式（"middle"垂直居中、"top"上对齐和"bottom"下对齐）
    "textBaseline": 'middle',

    // 设置线条虚线，应该是一个数组[number,...]
    "lineDash": [],

    // 文字大小
    "fontSize": 16,

    // 字体，默认"sans-serif"
    "fontFamily": "sans-serif",

    // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合）
    "arcStartCap": 'butt',

    // 圆弧结束端闭合方式，和上一个类似
    "arcEndCap": 'butt'
});
</pre>
<h3>
    基础方法
</h3>
<h4>
    标记应用节点
</h4>
<pre>painter.useEl(el);</pre>
<h4>
    获取当前应用的节点
</h4>
<pre>var el = painter.getEl();</pre>
<h4>
    追加节点
</h4>
<pre>painter.appendEl(el[, context]);</pre>
<h4>
    追加绘制板
</h4>
<pre>painter.appendBoard(el[, context]);</pre>
<h4>
    删除当前维护的节点
</h4>
<pre>painter.remove();</pre>
<h4>
    设置或获取节点属性
</h4>
<pre>painter.attr(params);</pre>
<h3>
    画笔方法
</h3>
<h4>
    文字
</h4>
<p>
    在点(x, y)处绘制填充的文字text；deg表示文字旋转角度，可选：
</p>
<pre>painter.fillText(text, x, y[, deg]);</pre>
<p class="warn">
    除非特别说明，角度全部采用角度制。
</p>
<p>
    在点(x, y)处绘制轮廓的文字text；deg表示文字旋转角度，可选：
</p>
<pre>painter.strokeText(text, x, y[, deg]);</pre>
<p>
    在点(x, y)处绘制轮廓并填充的文字text；deg表示文字旋转角度，可选：
</p>
<pre>painter.fullText(text, x, y[, deg]);</pre>
<h4>
    弧
</h4>
<p>
    以(cx, cy)为圆心，内外半径分别是r1和r2，从角度beginDeg开始，跨越角度deg，绘制填充圆弧：
</p>
<pre>painter.fillArc(cx, cy, r1, r2, beginDeg, deg);</pre>
<p>
    和fillArc方法类似，只不过绘制的是轮廓圆弧：
</p>
<pre>painter.strokeArc(cx, cy, r1, r2, beginDeg, deg);</pre>
<p>
    和fillArc方法类似，只不过绘制的是轮廓并填充圆弧：
</p>
<pre>painter.fullArc(cx, cy, r1, r2, beginDeg, deg);</pre>
<h4>
    圆形
</h4>
<p>
    以(cx, cy)为圆心，半径r绘制填充圆形：
</p>
<pre>painter.fillCircle(cx, cy, r);</pre>
<p>
    以(cx, cy)为圆心，半径r绘制轮廓圆形：
</p>
<pre>painter.strokeCircle(cx, cy, r);</pre>
<p>
    以(cx, cy)为圆心，半径r绘制轮廓并填充圆形：
</p>
<pre>painter.fullCircle(cx, cy, r);</pre>
<h4>
    矩形
</h4>
<p>
    以(x, y)为左上角，宽width，高height绘制填充矩形：
</p>
<pre>
    painter.fillRect(x, y, width, height);
</pre>
<p>
    以(x, y)为左上角，宽width，高height绘制轮廓矩形：
</p>
<pre>painter.strokeRect(x, y, width, height);</pre>
<p>
    以(x, y)为左上角，宽width，高height绘制轮廓并填充矩形：
</p>
<pre>painter.fullRect(x, y, width, height);</pre>
<h4>
    路径
</h4>
<p>
    基于路径可以绘制几乎大部分图形，非常类似画笔在纸上划动。
</p>
<p>
    开始一段独立的路径：
</p>
<pre>painter.beginPath();</pre>
<p>
    闭合当前路径，也就是路径首尾闭合：
</p>
<pre>painter.closePath();</pre>
<p>
    画笔移动到点(x, y)，此时笔离开了画布：
</p>
<pre>painter.moveTo(x, y);</pre>
<p>
    画笔移动到点(x, y)，此时笔没有离开画布：
</p>
<pre>painter.lineTo(x, y);</pre>
<p>
    以(cx, cy)为圆心，半径r，从角度beginDeg开始，跨越角度deg画弧，此时笔没有离开画布：
</p>
<pre>painter.arc(cx, cy, r, beginDeg, deg);</pre>
<p>
    二次贝塞尔曲线到：
</p>
<pre>painter.quadraticCurveTo(cpx, cpy, x, y);</pre>
<p class="warn">
    只有一个控制点p(cpx, cpy),画笔当前的位置和p(x, y)分别是起点和终点。
</p>
<p>
    三次贝塞尔曲线到：
</p>
<pre>painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);</pre>
<p class="warn">
    有两个控制点p(cp1x, cp1y)和p(cp2x, cp2y),画笔当前的位置和p(x, y)分别是起点和终点。
</p>
<p>
    把当前路径包裹的区域填充颜色：
</p>
<pre>painter.fill();</pre>
<p>
    把当前路径上色（轮廓线）：
</p>
<pre>painter.stroke();</pre>
<p>
    把当前路径画上轮廓线并填充颜色到当前路径所包裹的区域：
</p>
<pre>painter.full();</pre>